import React, { useState, useRef, useEffect } from 'react'
import * as echarts from 'echarts';
import axios from 'axios';
export default function OperateStateManage() {
  const pieRef = useRef()
  const [pieChart, setPieChart] = useState(null)
  const pieRef1 = useRef()
  const [pieChart1, setPieChart1] = useState(null)
  const lineRef = useRef()
  const [lineChart, setLineChart] = useState(null)
  useEffect(() => {
    axios.get("/logistics/overalllogistics").then(res => {
      buildPieChart(res.data, 1)
    })
    axios.get("/logistics/todaylogistics").then(res => {
      console.log(res.data);
      buildPieChart(res.data, 2)
    })
    axios.get("/logistics/sevendaylogistics").then(res => {
      line(res.data)
    })
  }, [])
  const buildPieChart = (pieData, type) => {
    var myChart
    if (type === 1) {
      if (!pieChart) {
        myChart = echarts.init(pieRef.current);
        setPieChart(myChart)
      } else {
        myChart = pieChart
      }
    } else {
      if (!pieChart1) {
        myChart = echarts.init(pieRef1.current);
        setPieChart1(myChart)
      } else {
        myChart = pieChart1
      }
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });
    myChart.setOption({
      title: {
        text: type === 1 ? '总体发货情况' : "当日发货情况",
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '数量',
          type: 'pie',
          radius: '50%',
          data: pieData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }
  const line = (datas) => {
    var myChart
    if (!lineChart) {
      myChart = echarts.init(lineRef.current);
      setLineChart(myChart)
    } else {
      myChart = lineChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',

        },
        //valueFormatter: (value) => value + "%"
      },
      grid: {
        right: '3%',
        left: "3%",
        bottom: '10%',
        top: "3%"
      },
      xAxis: {
        type: 'category',
        data: datas.datax,
        axisTick: { show: false },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: Math.max(...datas.datay),//((Math.max(...datas.datay) / 10) + 1) * 10,
        splitLine: {
          lineStyle: {
            type: 'dashed'//虚线
          },
          show: true //隐藏
        }
      },
      series: [
        {
          name: '数量:',
          type: 'line',
          showSymbol: false,
          data: datas.datay,
          lineStyle: {
            color: "#188df0"
          },
          areaStyle: {
            // shadowBlur: 20,  //阴影
            // origin: "start",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(126, 192, 247, 0.2)'
            },
            {
              offset: 0.5,
              color: 'white'
            }]) // 区域线条渐变色
          }
        }
      ]
    })
  }
  return (
    <div>
      <div style={{ height: "350px", display: "flex", background: "#f5f4f4" }}>
        <div style={{ flex: "1 1 200px", border: "1px soild gray", background: 'white', borderRadius: '10px', margin: "10px 5px 10px 0" }}>
          <div style={{ height: "36px", padding: '10px 0 10px 10px' }}>总体发货情况饼图</div>
          <div ref={pieRef} style={{ width: "100%", height: "85%", padding: "0 5%" }} ></div>
        </div>
        <div style={{ flex: "1 1 200px", border: "1px soild gray", background: 'white', borderRadius: '10px', margin: "10px 5px 10px 0" }}>
          <div style={{ height: "36px", padding: '10px 0 10px 10px' }}>当日发货情况饼图</div>
          <div ref={pieRef1} style={{ width: "100%", height: "85%", padding: "0 5%" }} ></div>
        </div>
      </div>
      <div style={{ width: "100%", height: "400px" }}>
        <div style={{ height: "20%", lineHeight: '20%', padding: '20px 10px' }}>过去七天发货数量
        </div>
        <div ref={lineRef} style={{ width: "100%", height: "80%", padding: "0 5%" }} >

        </div>
      </div>

    </div >
  )
}
